<template>
  <div class="app_main">
    <el-form ref="offerForm" :model="offer" :disabled="allFormDisabled">
      <div style="width: 300px;margin: 0px auto">
        <el-form-item label="行业类型">
          <el-select v-model="offer.industry_id" placeholder="请选择行业类型">
            <el-option v-for="item in industry_dict" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center">
      <el-form :model="tmp" ref="tmpForm" :disabled="allFormDisabled">
        <table class="mailTable">
          <tr class="firstTr">
            <td class="column firstTd">
              <div>价格配置名称</div>
            </td>
            <td class="column">
              <div>折扣</div>
            </td>
            <td class="column">
              <div>天/价格</div>
            </td>
            <td class="column">
              <div>周/价格</div>
            </td>
            <td class="column">
              <div>月价格</div>
            </td>
            <td class="column">
              <div>红线价</div>
            </td>
          </tr>
          <tr v-for="(item,index) in tmp.offerArr">
            <td class="column firstTd">
              <div>
                {{ item.media_spec_name }}
              </div>
            </td>
            <td class="column">
              <div>
                <el-form-item :prop="'offerArr.' + index + '.discount'"
                              :rules="{required: true, message: '折扣不能为空', trigger: 'blur'}"
                >
                  <el-input v-model="tmp.offerArr[index].discount" placeholder="请输入折扣" style="width: 180px"
                            size="small"
                            step="0.01" type="number"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </div>
            </td>
            <td class="column">
              <el-tag v-show="!item.price_day" size="mini">此类型无此价格</el-tag>
              <el-tag v-show="item.price_day" size="mini">刊例价{{ item.price_day }}/元/天</el-tag>
              <el-tag v-show="item.price_day && (item.discount === null || item.discount ==='')" type="warning"
                      size="mini"
              >请先填写折扣
              </el-tag>
              <el-tag v-show="item.price_day && item.discount !== null && item.discount !==''" type="success"
                      size="mini"
              >
                折扣后价格{{ getPriceAfterDiscount(item.discount, item.price_day) }}/元/天
              </el-tag>
            </td>
            <td class="column">
              <el-tag v-show="!item.price_week" size="mini">此类型无此价格</el-tag>
              <el-tag v-show="item.price_week" size="mini">刊例价{{ item.price_week }}/元/周</el-tag>
              <el-tag v-show="item.price_week && (item.discount === null || item.discount ==='')" type="warning"
                      size="mini"
              >请先填写折扣
              </el-tag>
              <el-tag v-show="item.price_week && item.discount !== null && item.discount !==''" type="success"
                      size="mini"
              >
                折扣后价格{{ getPriceAfterDiscount(item.discount, item.price_week) }}/元/周
              </el-tag>
            </td>
            <td class="column">
              <el-tag v-show="!item.price_month" size="mini">此类型无此价格</el-tag>
              <el-tag v-show="item.price_month" size="mini">刊例价{{ item.price_month }}/元/月</el-tag>
              <el-tag v-show="item.price_month && (item.discount === null || item.discount ==='')" type="warning"
                      size="mini"
              >请先填写折扣
              </el-tag>
              <el-tag v-show="item.price_month && item.discount !== null && item.discount !==''" type="success"
                      size="mini"
              >
                折扣后价格{{ getPriceAfterDiscount(item.discount, item.price_month) }}/元/月
              </el-tag>
            </td>
            <td class="column">
              <el-tag :type="item.red_line_price?'danger':'info'" size="mini">
                红线价：{{ item.red_line_price ? item.red_line_price + '元/月' : '暂未填写' }}
              </el-tag>
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <div v-if="!!(($route.params || {}).id || (($route.params || {}).handle_param || {}).id)">
      <flowCheckHistory :flowType="6"
                        :dataId="($route.params || {}).id || (($route.params || {}).handle_param || {}).id"
      />
    </div>
    <span slot="footer" class="footer">
      <el-button icon="el-icon-back" @click="closeThisPage">关闭</el-button>
      <el-button v-if="tmpRow.check" type="success" icon="el-icon-success" @click.native="showDialog">通过
      </el-button>
      <el-button v-if="tmpRow.check" type="danger" icon="el-icon-error" @click.native="showDialog(false)">驳回
      </el-button>
      <el-button v-if="showSubmit" type="primary" icon="el-icon-circle-plus" @click="saveInfo">提交</el-button>
      <el-button v-if="showSave" type="primary" icon="el-icon-circle-plus-outline" @click="submit">保存</el-button>
      <el-button v-if="showRemove" type="danger" icon="el-icon-circle-close" @click="remove">删除</el-button>
      <el-button
        v-if="showActualDelete"
        type="danger"
        icon="el-icon-circle-close"
        @click="actualDelete()"
      >彻底删除</el-button>
    </span>
    <el-dialog title="审批意见" :visible.sync="dialogFormVisible" width="500px" @close="checkDialogClose">
      <el-form :model="form">
        <el-form-item label-width="0">
          <el-input v-model="form.opinion" type="textarea" :rows="5"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :type="is_adopt?'primary':'danger'" @click="dialogCheck">{{ is_adopt ? '通过' : '驳回' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { actualDelete, check, getInfoById, getOne, remove, save, saveTmp } from '@/api/offer/offerFlow'
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { cloneDeep } from 'lodash'
import { multiply } from '@/utils/amount'
import flowCheckHistory from '@/components/FlowCheckHistory'

export default {
  name: 'Check',
  data() {
    return {
      listParams: {
        page: 1,
        page_size: 10,
        name: null,
        is_check_page: true
      },
      formDisabled: true,
      offerArr: [],
      tmp: {
        offerArr: []
      },
      total: null,
      tableData: [],
      tableLoading: false,
      centerDialogVisible: false,
      industry_dict: [],
      offer: {
        id: null,
        industry_id: null,
        offerTmps: []
      },
      media_dict: [],
      tmpRow: {},
      id: null,
      wf_data_id: null,
      showSubmit: null,
      showSave: null,
      showRemove: false,
      showActualDelete: false,
      form: {
        opinion: null
      },
      dialogFormVisible: false,
      is_adopt: true
    }
  },
  computed: {
    allFormDisabled() {
      return this.tmpRow.flow_status === 3 || this.tmpRow.flow_status === 4
    }
  },
  components: { flowCheckHistory },
  async created() {
    if (this.$route.params && this.$route.params.handle_param) {
      if (this.$route.params.handle_param.id) {
        this.id = this.$route.params.handle_param.id
        this.offer.id = this.$route.params.handle_param.id
      }
      if (this.$route.params.handle_param.wf_data_id) {
        this.wf_data_id = this.$route.params.handle_param.wf_data_id
      }
      if (this.$route.params.handle_param.type) {
        if (this.$route.params.handle_param.type == 2 || this.$route.params.handle_param.type == 3) {
          this.showSave = false
          this.showSubmit = false
        }
        if (this.$route.params.handle_param.type == 1) {
          this.formDisabled = false
          this.showSave = true
          this.showSubmit = true
        }
      }
      if (this.$route.params.handle_param.from && this.$route.params.handle_param.from == 4) {
        this.showSave = false
        this.showRemove = true
      }
      if (this.$route.params.handle_param.from && this.$route.params.handle_param.from == 2) {
        this.showRemove = true
      }
      if (this.$route.params.handle_param.from && this.$route.params.handle_param.from == 5) {
        this.showSave = true
        this.showRemove = true
      }
      if (this.$route.params.handle_param.from && this.$route.params.handle_param.from == 6) {
        this.wf_data_id = this.$route.params.handle_param.wf_data_id
        this.showActualDelete = true
      }
    }
    this.tableLoading = true
    await getOne({ offer_flow_id: this.id }).then(
      res => {
        this.tmpRow = res.data
        this.offer.industry_id = res.data[0].industry_id
        this.tmp.offerArr = res.data
      }
    ).catch(() => {

    })
    await getInfoById({ id: this.id }).then(
      res => {
        this.tmpRow = res.data
      }
    )
    this.initIndustryDict()
    this.$nextTick(() => {
      this.tableLoading = false
    })
  },
  mounted() {
    this.view = {
      name: this.$route.name
    }
  },
  methods: {
    showDialog(flag = true) {
      this.is_adopt = flag
      this.dialogFormVisible = true
    },
    dialogCheck() {
      this.check(this.is_adopt ? this.id : this.tmpRow.id, !this.is_adopt)
      this.dialogFormVisible = false
    },
    checkDialogClose() {
      this.form.opinion = null
    },
    check(id, is_return = false) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      check({ id: id, is_return: is_return, opinion: this.form.opinion }).then(
        res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
        this.$message.error('操作失败')
      })
    },
    // 初始化行业字典
    initIndustryDict() {
      list_all3rd_bycode({ code: 'khxg-hy' }).then(
        res => {
          this.industry_dict = res.data.map(item => (
            {
              id: item.id,
              name: item.name
            }
          ))
        }
      )
    },
    // 关闭页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.view.name)
    },
    // 初始化Input方法
    initInput() {
      this.offerArr = []
      for (let i = 0; i < this.media_dict.length; i++) {
        this.offerArr.push({
          media_id: this.media_dict[i].id,
          is_media: this.media_dict[i].is_media,
          daily_price: null,
          weekly_price: null,
          monthly_price: null,
          discount: null
        })
      }
      this.tmp.offerArr = this.offerArr
    },
    submit() {
      this.$refs.offerForm.validate((valid) => {
        if (valid) {
          this.$refs.tmpForm.validate(flag => {
            if (flag) {
              this.$confirm('确定保存到草稿箱?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                const loading = this.$loading({
                  lock: true,
                  text: '提交中',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                for (let i = 0; i < this.offerArr.length; i++) {
                  this.offerArr[i].industry_id = this.offer.industry_id
                }
                this.offer.offerTmps = cloneDeep(this.tmp.offerArr)
                if (this.$route.params.handle_param.from && this.$route.params.handle_param.from != 6) {
                  this.wf_data_id = null
                }
                save(this.offer, { wfData_id: this.wf_data_id }).then(
                  res => {
                    if (res.data) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      })
                      this.closeThisPage()
                    } else {
                      this.$message.error('操作失败')
                    }
                    this.centerDialogVisible = false
                    loading.close()
                  }
                ).catch(() => {
                  this.$message.error('操作失败')
                  loading.close()
                })
              }).catch(() => {

              })
            }
          })
        }
      })
    },
    saveInfo() {
      this.$refs.offerForm.validate((valid) => {
        if (valid) {
          this.$refs.tmpForm.validate(flag => {
            if (flag) {
              this.$confirm('确定提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                debugger
                const loading = this.$loading({
                  lock: true,
                  text: '提交中',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                for (let i = 0; i < this.offerArr.length; i++) {
                  this.offerArr[i].industry_id = this.offer.industry_id
                }
                this.offer.offerTmps = cloneDeep(this.tmp.offerArr)
                saveTmp(this.offer, { wfData_id: this.wf_data_id }).then(
                  res => {
                    if (res.data) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      })
                      this.closeThisPage()
                    } else {
                      this.$message.error('操作失败')
                    }
                    this.centerDialogVisible = false
                    loading.close()
                  }
                ).catch(() => {
                  loading.close()
                  this.$message.error('操作失败')
                })
              }).catch(() => {
              })
            }
          })
        }
      })
    },
    remove() {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ flow_id: this.offer.id, wfData_id: this.wf_data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    actualDelete() {
      this.$confirm('彻底删除将无法找回 确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        actualDelete({ flow_id: this.offer.id, wfData_id: this.wf_data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    /**
     * 获取折扣后价格
     */
    getPriceAfterDiscount(discount, price) {
      if (discount == null || discount == '' || price == null || price == '') {
        return ''
      }
      let s = '0.' + discount
      return multiply(s, price)
    }
  }
}
</script>

<style scoped>
.app_main {
  padding: 0 20px;
  margin-top: 20px;
}

.mailTable {
  width: 70%;
  margin: 10px auto;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 10px 10px 0px 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  width: 250px;
}

.mailTable tr td div .el-form-item {
  margin-bottom: 10px;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

.footer {
  display: block;
  width: 1000px;
  margin: 20px auto;
  text-align: center;
}
</style>
